import { forwardRef, useRef } from 'react'

// 子组件
// function Son() {
// 	return <input type="text" />
// }

// eslint-disable-next-line react/display-name
const Son = forwardRef((_props, ref) => {
	// forwardRef 返回的子组件，在父组件中使用时，可以通过 ref 直接获取到子组件的实例。
	return <input type="text" ref={ref} />
})

// 父组件
function ForWardRef() {
	const sonRef = useRef(null)
	const showRef = () => {
		console.log('子组件实例：', sonRef.current)
		sonRef.current.focus()
	}

	return (
		<>
			<h2>ForWardRef</h2>
			<hr />
			<Son ref={sonRef} />
			<button onClick={showRef}>输入框聚焦</button>
		</>
	)
}

export default ForWardRef
